h1 {
  font-family: "Rammetto One", cursive;
  margin: 3rem auto -2rem;
  font-size: 4rem;
  letter-spacing: -2px;
  text-shadow: 1px 1px #afc7b9, 0px 0px #afc7b9, -1px -1px #afc7b9, -2px -2px #afc7b9, -3px -3px #afc7b9, -4px -4px #afc7b9, -5px -5px #fca89d, -6px -6px #fca89d, -7px -7px #fca89d, -8px -8px #fac7b4, -9px -9px #fac7b4, -10px -10px #fac7b4, -11px -11px #ffe1c9, -12px -12px #ffe1c9, -13px -13px #ffe1c9, 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.15);
}

.c4, .c3, .c2, .c1 {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  margin-left: 0.125em;
  margin-right: 0.125em;
}
.c4::after, .c3::after, .c2::after, .c1::after, .c4::before, .c3::before, .c2::before, .c1::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.c4::before, .c3::before, .c2::before, .c1::before {
  bottom: -0.125rem;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(0.5);
  -webkit-animation: shadow 1s linear infinite;
          animation: shadow 1s linear infinite;
}
.c4::after, .c3::after, .c2::after, .c1::after {
  top: 0;
  height: 100%;
  background-color: currentColor;
  -webkit-animation: jellijump 1s linear infinite;
          animation: jellijump 1s linear infinite;
}

.c1 {
  color: #afc7b9;
  font-size: 3.125rem;
}
.c1::before, .c1::after {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.c2 {
  color: #fca89d;
  font-size: 2.5rem;
}
.c2::before, .c2::after {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

.c3 {
  color: #fac7b4;
  font-size: 1.875rem;
}
.c3::before, .c3::after {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

.c4 {
  color: #ffe1c9;
  font-size: 1.25rem;
}
.c4::before, .c4::after {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes jellijump {
  0%, 5%, 95%, 100% {
    transform: translateY(-2.5rem);
  }
  20% {
    transform: translateY(-1.875rem);
  }
  40% {
    transform: translateY(-0.625rem);
  }
  45% {
    transform: translateY(-0.3125rem) scale(1, 0.875);
  }
  50% {
    transform: translateY(0) scale(1, 0.75);
  }
  60% {
    transform: translateY(-0.625rem) scale(0.75, 1);
  }
  80% {
    transform: translateY(-1.875rem) scale(1, 0.875);
  }
  90% {
    transform: translateY(-2.1875rem);
  }
}

@keyframes jellijump {
  0%, 5%, 95%, 100% {
    transform: translateY(-2.5rem);
  }
  20% {
    transform: translateY(-1.875rem);
  }
  40% {
    transform: translateY(-0.625rem);
  }
  45% {
    transform: translateY(-0.3125rem) scale(1, 0.875);
  }
  50% {
    transform: translateY(0) scale(1, 0.75);
  }
  60% {
    transform: translateY(-0.625rem) scale(0.75, 1);
  }
  80% {
    transform: translateY(-1.875rem) scale(1, 0.875);
  }
  90% {
    transform: translateY(-2.1875rem);
  }
}
@-webkit-keyframes shadow {
  0%, 100% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  background-color: currentColor;
  color: white;
}

section {
  align-self: center;
  direction: rtl;
}